<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 新闻发布
        </el-breadcrumb-item>
        <!--        <el-breadcrumb-item>基本表单</el-breadcrumb-item>-->
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="大标题">
            <el-input v-model="form.btitle" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="小标题">
            <el-input v-model="form.ltitle"></el-input>
          </el-form-item>
          <el-form-item label="类别选择">
            <el-cascader
              v-model="form.category"
              placeholder="选择分类"
              :show-all-levels="false"
              :props="{ expandTrigger: 'hover',emitPath:false }"
              :options="options"></el-cascader>  <!--@change="handleChange"  绑定值改变时的事件-->
          </el-form-item>
          <!--<el-form-item label="日期时间">-->
          <!--<el-col :span="11">-->
          <!--<el-date-picker-->
          <!--type="date"-->
          <!--placeholder="选择日期"-->
          <!--v-model="form.date1"-->
          <!--value-format="yyyy-MM-dd"-->
          <!--style="width: 100%;"-->
          <!--&gt;</el-date-picker>-->
          <!--</el-col>-->
          <!--<el-col class="line" :span="2">-</el-col>-->
          <!--<el-col :span="11">-->
          <!--<el-time-picker-->
          <!--placeholder="选择时间"-->
          <!--v-model="form.date2"-->
          <!--style="width: 100%;"-->
          <!--&gt;</el-time-picker>-->
          <!--</el-col>-->
          <!--</el-form-item>-->
          <el-form-item label="内容概括">
            <el-input type="textarea" rows="3" v-model="form.introduction"></el-input>
          </el-form-item>
          <el-form-item label="新闻内容" style="width: 900px">
            <mavon-editor v-model="form.content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">发布</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
    name: 'baseform',
    components: {
      mavonEditor
    },
    data() {
      return {
        form: {
          btitle: '',//大标题
          ltitle: '',//小标题
          category: '',//分类
          // date1: '',//日期
          // date2: '',//时间
          date: '',
          introduction: '',//内容介绍
          content: '',//文章内容
          html: '',
        },
        options: [
          {
            value: 'zhinan',
            label: '指南',
            children: [{
              value: 'shejiyuanze',
              label: '设计原则',
              children: [{
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }]
            }, {
              value: 'daohang',
              label: '导航',
              children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
              }, {
                value: 'dingbudaohang',
                label: '顶部导航'
              }]
            }]
          }, {
            value: 'zujian',
            label: '组件',
            children: [{
              value: 'basic',
              label: 'Basic',
              children: [{
                value: 'layout',
                label: 'Layout 布局'
              }, {
                value: 'color',
                label: 'Color 色彩'
              }, {
                value: 'typography',
                label: 'Typography 字体'
              }, {
                value: 'icon',
                label: 'Icon 图标'
              }, {
                value: 'button',
                label: 'Button 按钮'
              }]
            }, {
              value: 'form',
              label: 'Form',
              children: [{
                value: 'radio',
                label: 'Radio 单选框'
              }, {
                value: 'checkbox',
                label: 'Checkbox 多选框'
              }, {
                value: 'input',
                label: 'Input 输入框'
              }, {
                value: 'input-number',
                label: 'InputNumber 计数器'
              }, {
                value: 'select',
                label: 'Select 选择器'
              }, {
                value: 'cascader',
                label: 'Cascader 级联选择器'
              }, {
                value: 'switch',
                label: 'Switch 开关'
              }, {
                value: 'slider',
                label: 'Slider 滑块'
              }, {
                value: 'time-picker',
                label: 'TimePicker 时间选择器'
              }, {
                value: 'date-picker',
                label: 'DatePicker 日期选择器'
              }, {
                value: 'datetime-picker',
                label: 'DateTimePicker 日期时间选择器'
              }, {
                value: 'upload',
                label: 'Upload 上传'
              }, {
                value: 'rate',
                label: 'Rate 评分'
              }, {
                value: 'form',
                label: 'Form 表单'
              }]
            }, {
              value: 'data',
              label: 'Data',
              children: [{
                value: 'table',
                label: 'Table 表格'
              }, {
                value: 'tag',
                label: 'Tag 标签'
              }, {
                value: 'progress',
                label: 'Progress 进度条'
              }, {
                value: 'tree',
                label: 'Tree 树形控件'
              }, {
                value: 'pagination',
                label: 'Pagination 分页'
              }, {
                value: 'badge',
                label: 'Badge 标记'
              }]
            }, {
              value: 'notice',
              label: 'Notice',
              children: [{
                value: 'alert',
                label: 'Alert 警告'
              }, {
                value: 'loading',
                label: 'Loading 加载'
              }, {
                value: 'message',
                label: 'Message 消息提示'
              }, {
                value: 'message-box',
                label: 'MessageBox 弹框'
              }, {
                value: 'notification',
                label: 'Notification 通知'
              }]
            }, {
              value: 'navigation',
              label: 'Navigation',
              children: [{
                value: 'menu',
                label: 'NavMenu 导航菜单'
              }, {
                value: 'tabs',
                label: 'Tabs 标签页'
              }, {
                value: 'breadcrumb',
                label: 'Breadcrumb 面包屑'
              }, {
                value: 'dropdown',
                label: 'Dropdown 下拉菜单'
              }, {
                value: 'steps',
                label: 'Steps 步骤条'
              }]
            }, {
              value: 'others',
              label: 'Others',
              children: [{
                value: 'dialog',
                label: 'Dialog 对话框'
              }, {
                value: 'tooltip',
                label: 'Tooltip 文字提示'
              }, {
                value: 'popover',
                label: 'Popover 弹出框'
              }, {
                value: 'card',
                label: 'Card 卡片'
              }, {
                value: 'carousel',
                label: 'Carousel 走马灯'
              }, {
                value: 'collapse',
                label: 'Collapse 折叠面板'
              }]
            }]
          }, {
            value: 'ziyuan',
            label: '资源',
            children: [{
              value: 'axure',
              label: 'Axure Components'
            }, {
              value: 'sketch',
              label: 'Sketch Templates'
            }, {
              value: 'jiaohu',
              label: '组件交互文档'
            }]
          }]
      };
    },
    methods: {
      $imgAdd(pos, $file) {
        var formdata = new FormData();
        formdata.append('file', $file);
        // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
        this.$axios({
          url: '/common/upload',
          method: 'post',
          data: formdata,
          headers: {'Content-Type': 'multipart/form-data'},
        }).then((url) => {
          this.$refs.md.$img2Url(pos, url);
        })
      },
      change(value, render) {
        // render 为 markdown 解析后的结果
        this.html = render;
      },
      onSubmit() {
        this.form.date = new Date();
        let News = {
          "btitle": this.form.btitle,
          "ltitle": this.form.ltitle,
          "time": this.form.date,
          "author": "王亚坤",
          "category": this.form.category,
          "browse": 0,
          "introduction": this.form.introduction,
          "state": "待审核",
          "content": this.form.content,
          "htmlcontent": this.html,
          "top": 0,
          "hot": 0
        };
        // console.log(News);
        let url = 'http://localhost:9999/news/insertNews';
        // console.log(url);
        //  当发起post请求之后， 通过 .then 来设置成功的回调函数
        this.$http.post(url, News).then(result => {
          this.$message.success('提交成功！');
          // console.log(result);
        }, response => {
          // error callback
          this.$message.error('提交失败！');
        });
        this.form.content = this.form.introduction = this.form.category = this.form.ltitle = this.form.btitle = this.form.date = '';
      }
    }

  };
</script>
